<template>
  <div class="menu">
    <ul class="menu_ui">
      <li v-for="(item,index) in category" @mouseleave="leave()" :key="index">
        <!-- 大分类 -->
        <div class="title" @mouseenter="showOv(index)">
          <img src="@/assets/bed.png" alt srcset>
          <span >
            <a class="big-title" @click="goToView(item)" href="javascript:void(0)">{{item.name}}</a>
          </span>
          <!-- 如果有子分类 -->
        </div>
        <div class="showBox" v-if="showIndex == index">
            <span>{{item.name}}</span>
            <a href="javascript:void(0)" @click="goToView(sitem)" v-for="(sitem,index) in item.sub" :key="index">{{sitem.name}}</a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {POST,ljmAjax } from '@/api/index'
export default {
  data() {
    return {
      show: false,
      showIndex: -1,
      category: []
    };
  },
  components: {},
  created(){
    this.getType();
  },
  methods: {
    goToView(item){
      console.log(item)
      this.$router.push('/list?shopType='+item.id+'&shopTitle='+item.name)
    },
    leave() {
      this.showIndex = -1;
    },
    showOv(index) {
      this.showIndex = index;
    },
    getType(){
      ljmAjax("api/index/getType").then(res => {
      const data = res.data.data
      let list = [];
      data.map(item=>{
        item.sub  = []
        if(item.is_parent == 1){
          list.push(item)
        }
      })

      data.map(item=>{
        list.map(sitem =>{
          if (item.parent_id == sitem.id) {
              sitem.sub.push(item)
          }
        })
      })
      console.log(list)
      this.category = list
     
    });
    }
  }
};
</script>

<style lang="scss" scoped>
.menu {
  height: 460px;
  width: 100%;
  .menu_ui {
    height: calc(100% - 18px);
    color: #fff;
    padding: 9px 0px 9px;
    background: #000;
    .big-title {
      font: 400 15px/25px "microsoft yahei";
      color: #fff;
    }
    a {
      font: 400 13px/25px "microsoft yahei";
      color: #c8c8c8;
    }

    .title {
      img {
        width: 25px;
        vertical-align: middle;
        margin-left: 20px;
      }
      span {
        margin-right: 5px;
      }
    }
    li {
      cursor: pointer;
      display: block;
      float: none;
      height: 34px;
      line-height: 34px;
      width: 200px;
    }
    li:hover {
      background: #fff;
      a {
        color: #333;
      }
      a:hover {
        color: red;
      }
    }
    .showBox {
      height: 440px;
      width: 560px;
      padding: 20px;
      position: absolute;
      text-align: justify;
      left: 200px;
      top: 0px;
      z-index: 99;
      background: rgba(255, 255, 255, 0.95);
      color: #333;
      .box{
        float: left;
        width: calc(100% - 93px);
        text-align: justify;
      }
      .title{
        width: 93px;
        font-size: 13px;
        font-weight: 700;
        float: left;
      }
      a{
        padding-right: 12px;
      }
    }
  }
}
</style>
